<template>
  <div>
    <el-row>
      <el-button-group>
        <el-button @click="reset">重置</el-button>
        <el-button @click="selectAll">全选</el-button>
        <el-button @click="turnSelectd">反选</el-button>
        <el-button @click="cancelSelectd">全不选</el-button>
        <el-button @click="generate">生成</el-button>
        <el-button @click="delectSelect">删除所选</el-button>
        <el-button @click="keepSelect">保留所选</el-button>
        <el-button @click="sort">排序</el-button>
      </el-button-group>
    </el-row>
    <el-divider content-position="left">content</el-divider>
    <div class="content" ref="content">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="edit formQuery" name="1">
          <el-row class="row-head" :gutter="20">
            <el-col :span="1">
              <el-checkbox disabled></el-checkbox>
            </el-col>
            <el-col :span="2">操作</el-col>
            <el-col :span="3">name</el-col>
            <el-col :span="3">chineseName</el-col>
            <!-- <el-col :span="2">自定义排序</el-col> -->
            <el-col :span="1">prop</el-col>
            <el-col :span="1">disabled</el-col>
            <el-col :span="2">type</el-col>
            <el-col :span="4">selectOption</el-col>
            <el-col :span="2">searchType</el-col>
            <el-col :span="1">span</el-col>
          </el-row>
          <draggable v-model="list" group="people" @start="drag=true" @end="drag=false">
            <el-row
              :gutter="20"
              class="drag-item"
              v-for="(item,index) in list"
              :key="index"
              type="flex"
              align="center"
            >
              <el-col :span="1">
                <el-checkbox v-model="item.selected" @change="checkChange(item.selected,index)"></el-checkbox>
              </el-col>
              <el-col :span="2">
                <el-button
                  type="text"
                  icon="el-icon-circle-plus"
                  circle
                  @click="innerAddRow(index)"
                ></el-button>
                <el-button type="text" icon="el-icon-delete" circle @click="onDeleteRow(index)"></el-button>
              </el-col>
              <el-col :span="3">
                <el-input v-model="item.name"></el-input>
              </el-col>
              <el-col :span="3">
                <el-input v-model="item.chineseName" @blur="nameInputBlur(index)"></el-input>
              </el-col>
              <!-- <el-col :span="2">
                <el-input v-model="item.sort" @input="sortInput(index)" @blur="sortBlur"></el-input>
              </el-col>-->
              <el-col :span="1">
                <el-checkbox v-model="item.prop" @change="checkChange(item.prop,index)"></el-checkbox>
              </el-col>
              <el-col :span="1">
                <el-checkbox v-model="item.disabled" @change="checkChange(item.disabled,index)"></el-checkbox>
              </el-col>
              <el-col :span="2">
                <el-select v-model="item.type">
                  <el-option label="input" value="input"></el-option>
                  <el-option label="date" value="date"></el-option>
                  <el-option label="search" value="search"></el-option>
                  <el-option label="select" value="select"></el-option>
                </el-select>
              </el-col>
              <el-col :span="4">
                <el-input v-model="item.selectOption"></el-input>
              </el-col>
              <el-col :span="2">
                <el-input v-model="item.searchType"></el-input>
              </el-col>
              <el-col :span="1">
                <el-input v-model="item.span"></el-input>
              </el-col>
            </el-row>
          </draggable>
        </el-collapse-item>
        <el-collapse-item title="formString" name="2">
          <div>{{ formString }}</div>
        </el-collapse-item>
        <el-collapse-item title="formRulesString" name="3">
          <div>{{ formRulesString }}</div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { generateFormQuery, generateFormRules } from '@/util/generator/index'
import { copyToClipboard } from '@/util/index'

export default {
  components: {
    draggable
  },
  data() {
    return {
      activeNames: ['1'],
      list: [],
      formString: '',
      formRulesString: ''
    }
  },
  mounted() {
    this.list = [{ selected: true, name: '', chineseName: '' }]
  },
  methods: {
    reset() {
      this.list = [{ selected: true, name: '', chineseName: '' }]
      this.activeNames = ['1']
    },
    selectAll() {
      this.list.forEach(item => {
        if (!item.selected) {
          item.selected = true
        }
      })
    },
    cancelSelectd() {
      this.list.forEach(item => {
        if (item.selected) {
          item.selected = false
        }
      })
    },
    turnSelectd() {
      this.list.forEach(item => {
        item.selected = !item.selected
      })
    },
    generate() {
      const selectedData = this.list.filter(item => item.name !== '')
      const listData = selectedData.map(item => {
        if (item.type && item.type === 'select') {
          return {
            ...item,
            selectOption: item.selectOption && item.selectOption.length > 0 ? item.selectOption.split(',') : []
          }
        } else {
          return item
        }
      })
      console.log(generateFormQuery)
      this.formString = generateFormQuery(listData)
      this.formRulesString = generateFormRules(listData)
      copyToClipboard(this.formString, this)
      this.activeNames = ['3', '4']
    },
    delectSelect() {
      this.list = this.list.filter(item => item.selected === false)
    },
    keepSelect() {
      this.list = this.list.filter(item => item.selected === true)
    },
    innerAddRow(index) {
      this.list.splice(index + 1, 0, {
        selected: false,
        name: '',
        chineseName: ''
      })
    },
    onDeleteRow(index) {
      this.list.splice(index, 1)
    },
    checkChange(val, index) {
      const item = this.list[index]
      if (val) {
        if (!item.selected) {
          item.selected = true
        }
      } else {
        if (!item.selected) {
          item.prop = false
          item.disabled = false
        } else if (!item.prop && !item.disabled && item.selected) {
          item.selected = false
        }
      }
    },
    sortInput(index) {
      if (index !== '') {
        this.list[index].selected = true
      }
    },
    nameInputBlur(index) {
      const name = this.list[index].chineseName
      if (name === '') {
        return
      }
      const dataItem = this.$store.state.allData.find(item => item.chineseName === name)
      if (dataItem) {
        this.list[index].name = dataItem.name
        this.list.push({ selected: true, name: '', chineseName: '' })
      } else {
        this.$message.error('key不存在')
      }
    },
    sort() {
      const needSort = this.list.filter(item => item.sort > 0).sort((a, b) => a.sort - b.sort)
      const elseList = this.list.filter(item => !item.sort)
      this.list = needSort.concat(elseList)
      this.$refs.content.scrollTop = 0
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  height: 800px;
  overflow-y: auto;
}
.row-head {
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  border-top: 1px solid #e6e6e6;
  background: #e6e6e6;
}
.drag-item {
  padding: 10px;
  border-bottom: 1px solid #e6e6e6;
  cursor: move;
  .el-col {
    line-height: 28px;
  }
}
</style>

<style lang="scss">
.el-collapse-item__header {
  font-size: 16px;
  padding-left: 15px;
  font-weight: bold;
  color: #409eff;
}
</style>